<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .addInput div {
            margin-top: 30px;
        }
        

        .title {
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: none;
            padding: 0 15px;
        }

        .content {
            display: block;
            resize: vertical;
            padding: 5px 15px;
            line-height: 1.5;
            box-sizing: border-box;
            width: 300px;
            height: 100px;
            font-size: inherit;
            color: #606266;
            background-color: #fff;
            background-image: none;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
        }

        .addInput div input:focus {
            outline: none;
            border-color: #409eff;
        }

        .contentContainer {
            display: flex;
        }

        .selectStyle {
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: none;
            padding: 0 15px;
            width: 200px;
        }

        .fileinput-button {
            position: relative;
            display: inline-block;
            overflow: hidden;
            background: #409eff;
            padding: 9px 15px;
            font-size: 12px;
            border-radius: 3px;
            color: white;
        }

        .fileinput-button input {
            position: absolute;
            right: 0px;
            top: 0px;
            opacity: 0;
            font-size: 50px;
        }

        .btn {
            background-color: #409eff;
            color: white;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            border: 1px solid #dcdfe6;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            transition: .1s;
            font-weight: 500;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
        }
        .uploadShow{
            width: 100px;
            height: 100px;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div class="menu-content">
        <h1>添加新闻</h1>
        <form class="addInput" method="post" action="php/add.php" onsubmit="return false;" enctype="multipart/form-data">
            <div>
				<!-- mvc module view controller -->
                标题：<input class="title" name="title" type="text" />
            </div>
            <div class="contentContainer">
                内容：<textarea class="content" name="content" id="" cols="30" rows="10"></textarea>
            </div>
            <div>
                类型：<select class="selectStyle mytype" name="type" id="">
                    <option value="逮捕">
                        逮捕
                    </option>
                    <option value="消息">
                        消息
                    </option>
                    <option value="通讯">
                        通讯
                    </option>
                    <option value="文学">
                        文学
                    </option>
                </select>
            </div>
            <div>
                国家：<select class="selectStyle country" name="country" id="">
                    <option value="美国">
                        美国
                    </option>
                    <option value="韩国">
                        韩国
                    </option>
                    <option value="日本">
                        日本
                    </option>
                    <option value="英国">
                        英国
                    </option>
                </select>
            </div>
            <div class="uploadContainer">
                缩略图：
                <span class="fileinput-button">
                    <span>上传图片</span>
                    <input class="imgFile" type="file" name="myimg" />
                </span>
                <div class="uploadShow"></div>
            </div>
            <div>
                <button class="btn" type="submit">提交</button>
            </div>
        </form>
    </div>
</body>
<script>

    let btnEle = document.querySelector(".btn");
    let titleEle = document.querySelector(".title");
    let contentEle = document.querySelector(".content");
    let typeEle = document.querySelector(".mytype");
    let countryEle = document.querySelector(".country");
    let imgEle = document.querySelector(".imgFile");
    let uploadShowEle = document.querySelector(".uploadShow");

    // 图片预览
    imgEle.onchange = function(){
        let imgFile = this.files[0];
        // 图片预览
        let fileReader = new FileReader();
        fileReader.readAsDataURL(imgFile);
        fileReader.onload = function(e){
            // let base64 = e.target.result;
            let base64 = fileReader.result;
            // console.log(base64);
            let img = new Image();
            // let img = document.createElement("img");
            img.src = base64;
            img.style.width = "100px";
            img.style.height = "100px";
            uploadShowEle.innerHTML = "";
            uploadShowEle.appendChild(img);
        }
    }


    btnEle.onclick = function(){
        let title = titleEle.value;
        let content = contentEle.value;
        let type = typeEle.value;
        let country = countryEle.value;
        let imgFile = imgEle.files[0];
        // let obj = {name:"张三"} ； let {name} = obj;

        let form = new FormData();
        form.append("title",title);
        form.append("content",content);
        form.append("type",type);
        form.append("country",country);
        form.append("myimg",imgFile);

        let xhr = new XMLHttpRequest();

        xhr.open("post","/postfile");

        xhr.onload = function(){
            console.log(xhr.responseText);
            let res = JSON.parse(xhr.responseText);
        }
        xhr.send(form);
    }


</script>
</html>